<!-- svg图标 -->
<template>
  <div :style="{ '--svg-icon-url': `url(${SvgIconUrl})` }" class="SvgIcon" />
</template>

<script setup name="SvgIcon" lang="ts">
import { watch } from 'vue'

const props = defineProps({
  url: String, // svg地址，要求根目录为static（http/https/api-xxx除外）
  IsTrue: Boolean, // 是否真实地址
})

let SvgIconUrl = ''

watch(
  () => props.url,
  (N) => {
    if (!N) return console.warn('svg缺少路径!')
    SvgIconUrl = N

    // 是否真实地址
    if (props.IsTrue) return

    // 是否http/https
    if (N.match(/^(?=http[s]{0,1})/)) return

    // 是否代理api-xxx
    if (N.match(/^(?=[\\/]{0,1}api)/)) return

    // 是否import，含有src/
    if (N.match(/^(?=[\\/]{0,1}src\/)/)) return

    // 是否含有public
    N = N.replace(/[\\/]{0,1}public[\\/]{0,1}/, '')

    // 是否含有static
    N = N.replace(/[\\/]{0,1}static[\\/]{0,1}/, '')

    // 是否含有/
    N = N.replace(/[\\/]{0,2}/, '../static/')

    SvgIconUrl = N
  },
  { immediate: true },
)
</script>

<style lang="scss" scoped>
.SvgIcon {
  // display: inline-block;
  background-color: currentColor;
  mask-image: var(--svg-icon-url);
  -webkit-mask-image: var(--svg-icon-url);
  mask-size: cover;
  -webkit-mask-size: cover;
}
</style>
